<template>
    <Page class="bg-[#f5f5f5] text-[#333] min-h-screen">
      <!-- 头部区域 -->
      <view class="header bg-gradient-to-r from-[#165DFF] to-[#1890ff] text-white p-[24rpx_32rpx] shadow-md sticky top-0 z-[1000] rounded-b-[32rpx]">
        <view class="top-bar flex justify-between items-center mb-[8rpx]">
          <view class="location flex items-center text-[24rpx]">
            <IconFont name="icon-location" class="mr-[8rpx] text-[28rpx]" />
            <text id="current-city" class="font-bold">南宁市</text>
          </view>
          <view class="user-info flex items-center">
            <view class="avatar w-[44rpx] h-[44rpx] rounded-full bg-white text-[#165DFF] flex items-center justify-center mr-[12rpx] font-bold text-[24rpx]">
              张
            </view>
            <text class="user-name text-[26rpx] font-bold">张三</text>
          </view>
        </view>
        <view class="id-display text-[22rpx] opacity-80">
          <span>平台ID: </span>
          <span id="user-id" class="font-bold">NF123456</span>
        </view>
      </view>
      
      <!-- 搜索区域 -->
      <!-- <view class="search-container p-[20rpx_32rpx] bg-[#f5f5f5]">
        <view class="search-box flex bg-white rounded-[32rpx] p-[12rpx_24rpx] items-center shadow-sm">
          <IconFont name="icon-search" class="text-[28rpx] text-[#999]" />
          <nut-input 
            class="flex-1 bg-transparent border-none outline-none text-[26rpx] ml-[16rpx]"
            placeholder="搜索悬赏任务、关键词..."
            v-model="searchText"
            @confirm="handleSearch"
          />
        </view>
      </view> -->
      <view class="search-container p-[30rpx] mt-[30rpx]" >
        <view class="search-box flex items-center bg-white rounded-[60rpx] px-[40rpx] py-[12rpx] shadow-[0_8rpx_24rpx_rgba(33,150,243,0.15)]">
          <input type="text" placeholder="搜索职位、公司或关键词..." class="flex-1 border-none outline-none text-[28rpx] text-[#263238] px-[20rpx] h-[48rpx] leading-[48rpx]" />
          <nut-button class="search-btn bg-[#1976D2] rounded-full w-[56rpx] h-[56rpx] flex items-center justify-center transition-all duration-300 hover:bg-[#1565C0] hover:scale-105 ml-[8rpx] p-0" @click="handleSearch" :style="{ backgroundColor: '#1976D2' }">
            <IconFont font-class-name="iconfont" class-prefix="icon" name="sousuo" size="20" color="#fff" :style="{display:'flex'}"/>
          </nut-button>
        </view>
      </view>
      
      <!-- 筛选区域 -->
      <view class="filters flex overflow-x-auto p-[16rpx_32rpx] bg-white border-t border-b border-[#eee] gap-x-[16rpx]">
        <view 
          v-for="(filter, index) in filters" 
          :key="index"
          class="filter-item px-[24rpx] py-[10rpx] bg-[#f5f5f5] rounded-[24rpx] text-[24rpx] whitespace-nowrap cursor-pointer font-medium transition-all duration-200"
          :class="{ 'bg-blue-500 text-white font-bold shadow': activeFilter === index, 'text-gray-500': activeFilter !== index }"
          @click="activeFilter = index"
        >
          {{ filter }}
        </view>
      </view>
      
      <!-- 悬赏任务列表 -->
      <view class="bounty-list p-[24rpx_32rpx] min-h-[calc(100vh-220rpx)] gap-y-[20rpx] flex flex-col">
        <view 
          v-for="(bounty, index) in bounties" 
          :key="index"
          @tap="handleBountyClick(bounty)"
          class="bounty-card bg-white rounded-[20rpx] p-[24rpx] mb-[20rpx] shadow-md relative flex flex-col"
        >
          <div class="bounty-header flex justify-between mb-[16rpx] items-center">
            <div class="bounty-title text-[30rpx] font-bold flex-1 text-[#222]">
              {{ bounty.title }}
            </div>
            <div class="bounty-status text-[22rpx] px-[16rpx] py-[6rpx] rounded-[16rpx] bg-[#f5f5f5] font-medium" :class="bounty.statusClass">
              {{ bounty.status }}
            </div>
          </div>
          
          <div class="bounty-publisher flex items-center mb-[12rpx]">
            <div class="publisher-avatar w-[36rpx] h-[36rpx] rounded-full bg-[#eee] mr-[12rpx] text-[22rpx] flex items-center justify-center font-bold text-[#165DFF]">
              {{ bounty.publisherAvatar }}
            </div>
            <div class="publisher-name text-[24rpx] text-[#666]">
              {{ bounty.publisherName }}
            </div>
          </div>
          
          <div class="bounty-desc text-[24rpx] text-[#666] mb-[12rpx] leading-[1.6]">
            {{ bounty.desc }}
          </div>
          
          <!-- 分阶段任务信息 -->
          <view 
            class="phase-info my-[12rpx] p-[16rpx] bg-[#f9f9f9] rounded-[10rpx] border-l-[6rpx] border-l-[#165DFF]"
            v-if="bounty.hasPhase"
          >
            <div class="phase-header flex justify-between text-[24rpx] mb-[8rpx]">
              <div class="phase-title font-bold">第一阶段：风格提案</div>
              <div class="phase-status text-[#52c41a] font-bold">已付款</div>
            </div>
            <div class="text-[22rpx]">金额：¥500 | 截止：明天 18:00</div>
          </view>
          
          <div class="bounty-meta flex justify-between text-[22rpx] text-[#999] mb-[20rpx]">
            <div>
              <div>发布时间：{{ bounty.publishTime }}</div>
              <div>交付截止：{{ bounty.deadline }}</div>
            </div>
            <div class="bounty-amount text-[32rpx] font-bold text-[#FF4D4F] text-right my-[8rpx]">
              {{ bounty.amount }}
            </div>
          </div>
          
          <view class="flex flex-wrap mb-[12rpx] gap-x-[8rpx] gap-y-[8rpx]">
            <view 
              v-for="(tag, tIndex) in bounty.tags" 
              :key="tIndex"
              class="tag text-[20rpx] px-[12rpx] py-[6rpx] bg-[#f0f2f5] rounded-[8rpx] text-[#165DFF] font-medium"
            >
              {{ tag }}
            </view>
          </view>
          
          <view class="bounty-footer flex justify-between mt-[16rpx] items-center">
            <view class="text-[22rpx] text-[#999]">已申请：{{ bounty.applyCount }}人</view>
            <nut-button 
              class="btn-apply px-[32rpx] py-[16rpx] bg-[#165DFF] text-white border-none rounded-[16rpx] text-[26rpx] font-bold shadow-md min-h-[60rpx]"
              :disabled="bounty.disabled"
              @click="handleApply(bounty.title)"
            >
              查看详情
            </nut-button>
          </view>
        </view>
      </view>
      
      <!-- 浮动发布按钮 -->
      <!-- <view class="float-btn fixed bottom-[120rpx] right-[32rpx] w-[88rpx] h-[88rpx] rounded-full bg-gradient-to-br from-[#FF4D4F] to-[#165DFF] text-white flex items-center justify-center text-[44rpx] shadow-lg cursor-pointer z-[999] animate-pulse">
        <IconFont name="icon-plus" />
      </view> -->
      
      <!-- 普通用户 TabBar -->
      <view class="tabbar user-tab fixed bottom-0 left-0 w-full h-[88rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]">
        <view 
          v-for="(tab, index) in userTabs" 
          :key="index"
          class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
          :class="{ 'active text-[#165DFF] font-bold border-b-[4rpx] border-[#165DFF] bg-[#f0f8ff]': index === 1, 'text-[#999]': index !== 1 }"
          @click="handleTabClick(tab.label)"
        >
          <view class="tab-icon text-[32rpx] mb-[6rpx]">
            <IconFont :name="tab.icon" />
          </view>
          <view class="tab-label text-[24rpx]">
            {{ tab.label }}
          </view>
        </view>
      </view>
      
      <!-- 从业者 TabBar -->
      <view class="tabbar worker-tab hidden fixed bottom-0 left-0 w-full h-[88rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]">
        <view 
          v-for="(tab, index) in workerTabs" 
          :key="index"
          class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
          :class="{ 'active text-[#52c41a] font-bold border-b-[4rpx] border-[#52c41a] bg-[#f6ffed]': index === 0, 'text-[#999]': index !== 0 }"
          @click="handleTabClick(tab.label)"
        >
          <view class="tab-icon text-[32rpx] mb-[6rpx]">
            <IconFont :name="tab.icon" />
          </view>
          <view class="tab-label text-[24rpx]">
            {{ tab.label }}
          </view>
        </view>
      </view>
      
      <!-- 商家 TabBar -->
      <view class="tabbar merchant-tab hidden fixed bottom-0 left-0 w-full h-[88rpx] bg-white border-t border-[#eee] flex justify-around items-center z-[1000]">
        <view 
          v-for="(tab, index) in merchantTabs" 
          :key="index"
          class="tab-item flex flex-col items-center justify-center flex-1 h-full transition-all duration-300 cursor-pointer relative"
          :class="{ 'active text-[#fa8c16] font-bold border-b-[4rpx] border-[#fa8c16] bg-[#fff7e6]': index === 1, 'text-[#999]': index !== 1 }"
          @click="handleTabClick(tab.label)"
        >
          <view class="tab-icon text-[32rpx] mb-[6rpx]">
            <IconFont :name="tab.icon" />
          </view>
          <view class="tab-label text-[24rpx]">
            {{ tab.label }}
          </view>
        </view>
      </view>
    </Page>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import Taro from '@tarojs/taro'
  import { IconFont } from '@nutui/icons-vue-taro'
  import { Input as nutInput, Button as nutButton } from '@nutui/nutui-taro'
  
  // 搜索文本
  const searchText = ref('')
  
  // 筛选条件
  const filters = ['全部', '设计类', '开发类', '文案类', '运营类', '咨询类', '数据类', '本地服务']
  const activeFilter = ref(0)
  
  // 悬赏任务数据
  const bounties = [
    {
      title: '网站前端开发',
      status: '新发布',
      statusClass: 'bg-[#e6f7ff] text-[#1890ff]',
      publisherAvatar: '天',
      publisherName: '天行科技 · 企业认证',
      desc: '需要开发公司官网前端页面，需熟悉React框架，响应式设计，要求7天内完成交付。有现成设计稿...',
      publishTime: '2小时前',
      deadline: '3天后',
      amount: '￥1200',
      tags: ['前端开发', 'React', '响应式'],
      applyCount: 18,
      hasPhase: false,
      disabled: false
    },
    {
      title: '移动应用UI设计',
      status: '执行中',
      statusClass: 'bg-[#f6ffed] text-[#52c41a]',
      publisherAvatar: '智',
      publisherName: '智能生活 · 平台认证',
      desc: '智能家居控制APP界面设计，需要提供风格稿、主界面设计和完整设计规范。分三个阶段付款...',
      publishTime: '1天前',
      deadline: '6天后',
      amount: '￥3500',
      tags: ['UI设计', '移动端', '交互设计'],
      applyCount: 37,
      hasPhase: true,
      disabled: false
    },
    {
      title: '产品文案撰写（中英双语）',
      status: '新发布',
      statusClass: 'bg-[#e6f7ff] text-[#1890ff]',
      publisherAvatar: '海',
      publisherName: '海外优选 · 企业认证',
      desc: '为跨境电商产品撰写产品介绍文案（中英文各一版），需要突出产品特点和优势，吸引目标客户...',
      publishTime: '4小时前',
      deadline: '2天后',
      amount: '￥800',
      tags: ['文案撰写', '英文文案', '产品营销'],
      applyCount: 7,
      hasPhase: false,
      disabled: false
    },
    {
      title: '微信公众号运营（3个月）',
      status: '多人承接',
      statusClass: 'bg-[#fff7e6] text-[#fa8c16]',
      publisherAvatar: '教',
      publisherName: '教育优选 · 平台认证',
      desc: '长期合作！需要专业的教育领域运营人才，负责公众号内容规划、撰写、排版和数据分析...',
      publishTime: '2天前',
      deadline: '每月考核',
      amount: '￥5000/月',
      tags: ['公众号运营', '内容创作', '教育行业'],
      applyCount: 46,
      hasPhase: false,
      disabled: false
    }
  ]
  
  // 底部导航数据
  const userTabs = [
    { icon: 'icon-home', label: '接单广场' },
    { icon: 'icon-tasks', label: '悬赏大厅' },
    { icon: 'icon-education', label: '能力提升' },
    { icon: 'icon-factory', label: '工厂招聘' },
    { icon: 'icon-user', label: '个人中心' }
  ]
  
  const workerTabs = [
    { icon: 'icon-taskhall', label: '任务大厅' },
    { icon: 'icon-wallet', label: '钱包' },
    { icon: 'icon-record', label: '接单记录' },
    { icon: 'icon-credit', label: '信用评级' },
    { icon: 'icon-user', label: '我的' }
  ]
  
  const merchantTabs = [
    { icon: 'icon-data', label: '店铺数据' },
    { icon: 'icon-publish', label: '任务发布' },
    { icon: 'icon-customers', label: '客户管理' },
    { icon: 'icon-orders', label: '订单处理' },
    { icon: 'icon-user', label: '我的' }
  ]
  
  // 当前角色
  const currentRole = ref('user') // user, worker, merchant
  
  // 处理搜索
  const handleSearch = () => {
    Taro.showToast({
      title: `搜索: ${searchText.value}`,
      icon: 'none',
      duration: 2000
    })
  }
  
  // 处理申请执行
  const handleApply = (taskTitle) => {
    Taro.showToast({
      title: `您已申请执行任务: ${taskTitle}\n等待发布者审核...`,
      icon: 'none',
      duration: 2000
    })
  }
  
  // 处理Tab点击
  const handleTabClick = (label) => {
    Taro.showToast({
      title: `已切换到: ${label}`,
      icon: 'none',
      duration: 2000
    })
  }
  
  // 处理角色切换
  const switchRole = (role) => {
    currentRole.value = role
    // 在实际应用中，这里应该显示对应角色的TabBar
    Taro.showToast({
      title: `已切换到${role === 'user' ? '普通用户' : role === 'worker' ? '从业者' : '商家'}模式`,
      icon: 'none',
      duration: 2000
    })
  }
  const handleBountyClick = (bounty) => {
    Taro.navigateTo({
      url: `/pages/webs/task-details-reward-task-platform?id=${bounty.id}`
    })
  }
  </script>